<div>
    <div class="viewInnerBackground">
        <div class="twoColumnsSep">
            <div class="column1">
                <div class="hiddableTitlePaneContainer">
                    <div data-dojo-type="dijit/TitlePane"
                         data-dojo-attach-point="filterOptionsPane"
                         data-dojo-props="title: '${messages.filterOptions}', open: false">

                        <form data-dojo-attach-point="searchItemForm" data-dojo-type="dijit/form/Form">
                            <div class="formRow">
                                <span class="label mediumWidth">
                                    <label for="${id}_itemInternalCode">${messages.internalCode}</label>
                                </span>
                                <span class="input">
                                    <input id="${id}_itemInternalCode"
                                           data-dojo-attach-point="itemInternalCodeInput"
                                           data-dojo-type="dijit/form/TextBox"
                                           name="code_i" type="text" value="*" />
                                </span>
                            </div>

                            <div class="formRow">
                                <span class="label mediumWidth">
                                    <label for="${id}_itemName">${messages.name}</label>
                                </span>
                                <span class="input">
                                    <input id="${id}_itemName"
                                           data-dojo-attach-point="itemNameInput"
                                           data-dojo-type="dijit/form/TextBox"
                                           name="name" type="text" value="*"/>
                                </span>
                            </div>

                            <div class="formRow">
                                <span class="label mediumWidth">
                                    <label for="${id}_itemSupplierCode">${messages.supplierCode}</label>
                                </span>
                                <span class="input">
                                    <input id="${id}_itemSupplierCode"
                                           data-dojo-attach-point="itemSupplierCodeInput"
                                           data-dojo-type="dijit/form/TextBox"
                                           name="code_s" type="text" value="*"/>
                                </span>
                            </div>

                            <div class="formRow">
                                <span class="label mediumWidth">
                                    <label for="${id}_itemSupplier">${messages.supplier}</label>
                                </span>
                                <span class="input">
                                    <select id="${id}_itemSupplier"
                                            name="supplier_id"
                                            data-dojo-attach-point="itemSupplierInput"                                        
                                            data-dojo-type="dijit/form/Select"
                                            data-dojo-props="labelAttr: 'name'">
                                    </select>
                                </span>
                            </div>

                            <div class="formRow">
                                <span class="input">
                                    <button data-dojo-type="dijit/form/Button"
                                            data-dojo-attach-point="searchButton"
                                            data-dojo-attach-event="onClick: _searchItems">${messages.buttonSearch}</button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>

                <div data-dojo-attach-point="itemsGrid"
                     data-dojo-type="dojox/grid/DataGrid"
                     data-dojo-props="selectionMode: 'single'"
                     data-dojo-attach-event="onRowClick: _showItemOverview"
                     style="height: 600px;"></div>
            </div>

            <div class="separator"></div>

            <div class="column2">
                <p>${messages.totalPrice}:<span data-dojo-attach-point="itemTotalCostNode"></span></p>

                <p class="marginTop">${messages.inventoryStatus}</p>
                <div data-dojo-attach-point="inventoryStatusGrid" 
                     data-dojo-type="dojox/grid/DataGrid"
                     data-dojo-props="selectionMode: 'single'"
                     style="height: 200px;"></div>

                <p class="marginTop">${messages.suppliers}</p>
                <div data-dojo-attach-point="suppliersGrid" 
                     data-dojo-type="dojox/grid/DataGrid"
                     data-dojo-props="selectionMode: 'single'"
                     style="height: 200px;"></div>

                <p class="floatRight">
                    <button data-dojo-type="dijit/form/Button"
                            data-dojo-attach-point="queryExternalInvertoryButton"
                            data-dojo-attach-event="onClick: _showItemDetail">${messages.buttonQueryExternalInventory}</button>
                </p>
                <div class="clear"></div>

                <p class="floatRight">
                    <button data-dojo-type="dijit/form/Button"
                            data-dojo-attach-point="itemDetailButton"
                            data-dojo-attach-event="onClick: _showItemDetail">${messages.buttonDetail}</button>
                </p>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>